<template>
  <el-row :gutter="24" style="margin-left: 10px">
    <el-col :span="17">
      <el-tabs class="table-form-detail" type="border-card">
        <el-tab-pane label="基本信息"
          ><DetailContent :dataModel="deviceBasic.detailInfo"
        /></el-tab-pane>
        <el-tab-pane label="档案资料"
          ><HistoryContent :dataModel="deviceBasic.detailInfo"
        /></el-tab-pane>
      </el-tabs>
    </el-col>
    <el-col :span="7" class="table-form-approve">
      <Approve :dataKey="deviceBasic.deviceBasicId" />
    </el-col>
  </el-row>
</template>
<script>
import Approve from "@/components/ApproveForm";
import DetailContent from "./detailContent";
import HistoryContent from "./historyContent";
import data from "./const";
import { mapState, mapMutations } from "vuex";
export default {
  components: { Approve, DetailContent, HistoryContent },
  data() {
    this.$store.dispatch("deviceBasic/setDetailInfo", data.detailShowInfo);
    return {
      data,
    };
  },
  computed: {
    ...mapState(["deviceBasic"]),
  },
  created() {
    const dataKey = this.$route.fullPath;
    const id = localStorage.getItem(dataKey);
    this.$store.dispatch("deviceBasic/requestDeviceDetailInfo", id);
  },
};
</script>